<template>
  <div class="captcha-test-container">
    <el-card class="test-card">
      <template #header>
        <div class="card-header">
          <span>验证码功能测试</span>
        </div>
      </template>
      
      <div class="test-section">
        <h3>验证码类型选择</h3>
        <el-radio-group v-model="currentType" @change="handleTypeChange">
          <el-radio label="image">图片验证码</el-radio>
          <el-radio label="math">数学运算验证码</el-radio>
          <el-radio label="slider">滑块验证码</el-radio>
        </el-radio-group>
      </div>
      
      <div class="test-section">
        <h3>验证码组件</h3>
        <CaptchaComponent
          ref="captchaRef"
          :type="currentType"
          :required="true"
          @verify-success="handleVerifySuccess"
          @verify-failed="handleVerifyFailed"
        />
      </div>
      
      <div class="test-section">
        <h3>操作按钮</h3>
        <el-space>
          <el-button type="primary" @click="handleVerify">
            手动验证
          </el-button>
          <el-button @click="handleRefresh">
            刷新验证码
          </el-button>
          <el-button @click="handleClear">
            清除验证码
          </el-button>
        </el-space>
      </div>
      
      <div class="test-section">
        <h3>验证结果</h3>
        <el-alert
          v-if="verifyResult"
          :title="verifyResult.title"
          :type="verifyResult.type"
          :description="verifyResult.description"
          show-icon
          :closable="false"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import CaptchaComponent from '../../components/CaptchaComponent.vue'

const captchaRef = ref()
const currentType = ref('image')
const verifyResult = ref(null)

// 处理验证码类型变化
const handleTypeChange = (type) => {
  console.log('验证码类型变更为:', type)
  verifyResult.value = null
  
  // 刷新验证码组件
  setTimeout(() => {
    if (captchaRef.value) {
      captchaRef.value.refresh()
    }
  }, 100)
}

// 处理验证成功
const handleVerifySuccess = (data) => {
  console.log('验证成功:', data)
  verifyResult.value = {
    title: '验证成功',
    type: 'success',
    description: `验证码ID: ${data.captchaId || 'N/A'}, 用户输入: ${data.userInput || data.x || 'N/A'}`
  }
  ElMessage.success('验证码验证成功')
}

// 处理验证失败
const handleVerifyFailed = () => {
  console.log('验证失败')
  verifyResult.value = {
    title: '验证失败',
    type: 'error',
    description: '验证码验证失败，请重试'
  }
}

// 手动验证
const handleVerify = () => {
  if (captchaRef.value) {
    captchaRef.value.verify()
  } else {
    ElMessage.error('验证码组件未初始化')
  }
}

// 刷新验证码
const handleRefresh = () => {
  if (captchaRef.value) {
    captchaRef.value.refresh()
    verifyResult.value = null
    ElMessage.info('验证码已刷新')
  } else {
    ElMessage.error('验证码组件未初始化')
  }
}

// 清除验证码
const handleClear = () => {
  verifyResult.value = null
  ElMessage.info('验证结果已清除')
}
</script>

<style scoped>
.captcha-test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 16px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fafafa;
}

.test-section h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.test-section:last-child {
  margin-bottom: 0;
}
</style>
